<template>
  <div :class="['message-div', {'message-div-hover': isSelect}]">
    <div class="message-number">{{number}}</div>
    <!-- <countTo class="message-number" :startVal="0" :endVal="number" separator></countTo> -->

    <div class="message-unit">{{unit}}</div>
  </div>
</template>
<script>
export default {
  props: ["number", "unit", "isSelect"]
};
</script>
<style lang="scss">
.message-div {
  padding-left: 1rem;
  width: 9.23rem;
  height: 4.92rem;
  opacity: 0.7;
  letter-spacing: 0.05rem;
  font-family: DINAlternate-Bold;
  // background: #00183b;
  // border: 1px solid #2b88ff;
  // box-shadow: inset 0 1px 7px 0 #2b83ff;
  background: url("../../assets/right/second/border_ljqy.png");

  .message-number {
    color: white;
    opacity: 1;
    letter-spacing: 0.05rem;
    margin-top: 0.8rem;
    font-size: 1.85rem;
    font-family: DINAlternate-Bold;
  }

  .message-unit {
    opacity: 0.8;
    font-family: PingFangSC-Regular;
    font-size: 1.23rem;
    opacity: 1;
    margin-top: 0.8rem;
    color: #bed7fa;
    letter-spacing: 0;
  }
}
.message-div-hover {
  opacity: 1;
}
</style>